<template>
  <div class="changePhone">
    <top-bar :title="'修改密码'"/>
    <div class="content">
      <!-- 已绑定 -->
      <div v-if="state">
        <div class="content-top">
          <span>当前绑定手机{{phoneNumbers}}</span>
        </div>
        <div class="content-bottom">
          <el-input v-model="input" placeholder="请输入验证码"></el-input>
          <span @click="getCode">获取验证码</span>
        </div>
      </div>
      <!-- 未绑定 -->
      <el-input v-else style="margin-top: 0.53rem;" show-password v-model="oldPassword" placeholder="请输入旧密码"></el-input>
      <el-input style="margin: 0.37rem auto 0.30rem auto;" show-password v-model="newPassword" placeholder="请输入新密码（6-20位数字、字母组合，区分大小写）" @input="checkPwd"></el-input>
      <el-input v-model="truePassword" placeholder="请确认新密码" show-password @input="checkPwd"></el-input>
    </div>
    <div class="submit">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
  import topBar from './topBar'
  export default {
    name: "changePass",
    components: {
      topBar
    },
    data() {
      return {
        phoneNumbers: "181****8145",
        input: "",
        oldPassword: "",
        newPassword: "",
        truePassword: "",
        state: false
      }
    },
    computed: {
      failMsg() {
        return this.$store.state.failMsg
      },
      actionStatus () {
        return this.$store.state.actionStatus
      }
    },
    watch: {
      failMsg() {
        this.failMsg && this.Toast(this.failMsg, 500);
      },
      actionStatus(){
        this.actionStatus && this.Toast('修改成功', 500);
        setTimeout(() => {
          try {
            if(window.huo){
              var ua = navigator.userAgent;
              var appData = ua.split('=')[1];
              if (appData) {
                window.parent.postMessage(JSON.stringify({
                  type:'back.app',
                  value:''
                }),'*')
              }
              window.huo.changeAccount()
            }else{
              window.parent.postMessage(JSON.stringify({
                type:'member.logout',
                value:''
              }),'*')
            }

          } catch (t) {
          }
        },2000)
      }
    },
    methods: {
      getCode() {
        console.log("验证码");
      },
      checkPwd () {
        // if (this.truePassword && this.truePassword !== this.newPassword) {
        //   this.Toast('新密码输入不一致！', 500)
        // }
      },
      // 下一步
      submit() {
        if (!this.oldPassword) {
          this.Toast('请输入旧密码！', 500)
          return false
        }
        if (!this.newPassword) {
          this.Toast('请输入新密码！', 500)
          return false
        }
        if (!this.truePassword) {
          this.Toast('请再次输入新密码！', 500)
          return false
        }
        if (this.newPassword !== this.truePassword) {
          this.Toast('新密码输入不一致！', 500)
          return false
        }
        if (this.oldPassword === this.newPassword) {
          this.Toast('新旧密码一致，不用修改！', 500)
          return false
        }
        this.$store.dispatch('updateUserPasswd', {
          oldpwd: this.oldPassword.trim(),
          newpwd: this.newPassword.trim()
        })
        // window.setInterval(() => {
        //   this.$router.replace({path:'/me/settings'})
        // }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-input .el-input__clear {
    font-size: 0.32rem;
  }
  /deep/ .el-input__suffix {
    margin-right: 0.1rem;
  }
  .changePhone {
    padding: 0.75rem 0.48rem;
    .content {
      /deep/ .el-input__inner {
        height: 1.39rem;
        border: none;
        padding-left: 0.4rem;
        border-radius: 0.21rem 0 0 0.21rem;
        font-size: 0.32rem;
      }
      .content-top {
        width: 100%;
        height: 1.39rem;
        span {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #363739;
          margin-left: 0.4rem;
        }
      }
      .content-bottom {
        width: 100%;
        height: 1.39rem;
        background: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        border-radius: 0.21rem;
        > span {
          width: 2.22rem;
          font-size: 0.29rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #FF1D1D;
          margin-right: 0.67rem;
        }
      }
      /deep/ .el-input__inner {
          height: 1.39rem;
          border: none;
          padding-left: 0.4rem;
          border-radius: 0.21rem;
        }
    }
    .submit {
      padding: 0 0.45rem;
      button {
        margin-top: 0.96rem;
        width: 8.13rem;
        height: 1.2rem;
        background: #FF751A linear-gradient(90deg, #FF0000 0%, #FFD500 100%);
        border-radius: 0.67rem;
        font-size: 0.45rem;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
</style>
